{extend name="base" /}
{block name='content'}
<blockquote class="layui-elem-quote">菜单列表</blockquote>
    <div class="layui-card">
      <div class="layui-card-header" style="padding: 15px;">
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" id="add">添加菜单</a> 
      </div>
        <div class="layui-card-body">
          <form class="layui-form">
            <table class="layui-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>菜单类型</th>
                  <th>菜单名称</th>
                  <th>菜单url</th>
                  <th>菜单节点</th>
                  <th>是否左侧显示</th>
                  <th>状态</th>
                  <th>创建时间</th>
                  <th>更新时间</th>
                  <th>操作</th>
                </tr> 
              </thead>
              <tbody>
                {foreach $list as $vo}
                <tr>
                  <td>{$vo.id}</td>
                  <th>{$vo.type}</th>
                  <td>{$vo.title}</td>
                  <td>{$vo.url}</td>
                  <td>{$vo.node}</td>
                  <td>
                      {notempty name='$vo.display'}
                        <span class="layui-font-green">显示</span>
                      {else/}  
                        <span class="layui-font-red">隐藏</span>
                      {/notempty}
                  </td>
                  <td>
                      {empty name='$vo.status'}
                        <span class="layui-font-red">禁用</span>
                      {else/}  
                        <span class="layui-font-green">启用</span>
                      {/empty}
                  </td>
                  <td>{$vo.create_time}</td>
                  <td>{$vo.update_time}</td>
                  <td>
                    {empty name='$vo.status'}
                      <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-green switch" data-status="1" data-id="{$vo.id}">启用</a>
                    {else/}  
                      <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-red switch" data-status="0" data-id="{$vo.id}">禁用</a>
                    {/empty}
                    <a class="layui-btn layui-btn-sm layui-btn-warm child" data-id="{$vo.id}">添加子菜单</a>
                    <a class="layui-btn layui-btn-sm edit" data-id="{$vo.id}">编辑</a>
                    <a class="layui-btn layui-btn-sm layui-btn-danger del" data-id="{$vo.id}">删除</a>
                  </td>
                </tr>
                {/foreach}
              </tbody>
            </table>
        </form>
        </div>
    </div>
    <script>
        layui.use(['layer','form'], function(){
          var form = layui.form,layer = layui.layer;
          $('#add').click(function(){
              layer.open({
              title:['添加菜单'],  
              type:2,
              area:['700px','800px'],
              content: '/admin/menu/create',
            })
          });

          $('.child').click(function(){
              let id = $(this).attr('data-id');
              layer.open({
              title:['添加子菜单'],  
              type:2,
              area:['700px','800px'],
              content: '/admin/menu/child?id='+id,
            })
          })
    
          $('.edit').click(function(){
              let id = $(this).attr('data-id');
              layer.open({
              title:['编辑菜单'],  
              type:2,
              area:['700px','800px'],
              content: '/admin/menu/edit?id='+id,
            })
          })
          

           
        $('.switch').on('click',function(){
          let status = $(this).attr('data-status'), id = $(this).attr('data-id');
          $.post('/admin/menu/switch',{status:status,id:id},function(res){
                if(res.code == 1){
                  layer.msg(res.msg,{icon:1});
                  parent.$.pjax.reload('#main',{fragment: '#main'});
                  return false;
                }

                layer.msg(res.msg,{icon:2});
          });

        });
          


          $('.del').on('click',function(){
            let that = $(this);
            let id = that.attr('data-id');
    
            layer.confirm('您确定要删除吗？', {
                  btn: ['确定','取消'] 
            }, function(){
                  $.get('/admin/menu/delete?id='+id,function(res){
                      if(res.code == 1){
                              layer.msg(res.msg,{icon:1});
                              that.parents('tr').remove();
                              return false;
                            }
    
                        layer.msg(res.msg,{icon:2});
                  });
              });
          });
          
          
    });              
   </script>    
{/block}